<template>
	<view class="" v-if="datels">
		<u-navbar :is-back="true" :title="datels.className" back-icon-color="#ffffff"
			:background="{backgroundColor:'#E62131'}" title-color="#ffffff"></u-navbar>
		<view class="toplists">
			<!-- <u-steps :list="numList" :current="2" active-color="#E62131" ></u-steps> -->
			<view class="listcemter fliexs">
				<u-icon name="man-delete" color="#a7a7a7" size="30"></u-icon> <span
					style="padding-left: 10rpx;">{{datels.coachName}}</span>
			</view>
			<view class="listcemter fliexs" style="margin: 10px 0;">
				<u-icon name="clock" color="#a7a7a7" size="30"></u-icon> <span
					style="padding-left: 10rpx;">{{datels.classStartTime}}~{{datels.classEndTime}}</span>
			</view>
			<view class="listcemter fliexs">
				<u-icon name="calendar" color="#a7a7a7" size="30"></u-icon> <span
					style="padding-left: 10rpx;">已出勤{{numsber}}/{{datels.studentWorkList.length}}</span>
			</view>
		</view>
		<view style="height: 20rpx; background-color: #e1e1e1;">

		</view>
		<view class="" style="padding: 30rpx;">
			<view class="titles" style="color: #000000;font-weight: bold;">
				课时照片
			</view>
			<u-upload :action="action" :header="header" :file-list="fileList" @on-success="onsuccesslist"></u-upload>
		</view>
		<view style="height: 20rpx; background-color: #e1e1e1;">

		</view>
		<view class="" style="padding: 0 30rpx;">
			<view class="titles" style="color: #000000;font-weight: bold;padding: 30rpx 0;">
				选择学员
			</view>

			<view class="lsitcenetr" style="padding-bottom: 120rpx;">
				<view class="leftlist">
					<!-- <u-checkbox-group :wrap="true" width="370rpx">
						<u-checkbox shape="circle" active-color="#E62131"
							v-for="(item, index) in datels.studentWorkList" @change="checkboxChange($event,index)"
							:key="index" v-model="item.checked" :name="item.studentName">
							
						</u-checkbox>
					</u-checkbox-group> -->
					<view class="lsitchser" v-for="(item, index) in datels.studentWorkList" :key="index"
						style="display: flex;">
						<div @click="checkboxChange(item,index)">
							<image v-if="item.checked" style="width: 40rpx;height: 40rpx;margin-right: 20rpx;"
								src="../../static/images/xuanzhong.png" mode=""></image>
							<image v-else style="width: 40rpx;height: 40rpx;margin-right: 20rpx;"
								src="../../static/images/weixuanzhong.png" mode=""></image>

						</div>
						<div class="lsitchser" style="width: 100%;" @click="checkboxChange(item,index)">
							<div class="leftname">
								<div class="lefttop">{{item.studentName}}
									<!-- <u-tag text="正常" type="error"
										size="mini" :closeable="false" mode="plain" style="margin: 0 20rpx;" />
									<u-tag text="上课" type="error" size="mini" :closeable="false" mode="plain" /> -->
								</div>
								<div class="texts">{{datels.className}}</div>
							</div>
							<view class="classright">
								<u-tag :text="item.isAttendance!=0?'已考勤':'未考勤'" type="error" size="mini"
									:closeable="false" mode="plain" />
								<div class="btn">扣{{item.workOut.classHours || 0}}</div>
							</view>
						</div>
						<u-icon name="arrow-right" color="#a7a7a7" size="30" style="margin-left: 20rpx;"
							@click="ispopupshow(item, index)"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<u-popup v-model="popupshow" mode="bottom">
			<view style="padding: 30rpx 30rpx 40rpx;">
				<view class="lsiutsad">
					<view class="nametxts">扣费课程</view>
					<view>{{datels.courseInfo.name}}</view>
				</view>
				<view class="lsiutsad">
					<view class="nametxts">剩余课程</view>
					<view v-if="popitem">{{popitem.residueNum}}</view>
				</view>
				<view class="lsiutsad">
					<view class="nametxts">出勤情况</view>
					<view class="pads" :class="inact == 1?'listactve':''" @click="lisglcais(1)">上课</view>
					<view class="pads" :class="inact == 2?'listactve':''" @click="lisglcais(2)">缺勤</view>
					<view class="pads" :class="inact == 3?'listactve':''" @click="lisglcais(3)">请假</view>
				</view>
				<view class="lsiutsad">
					<view class="nametxts">实际课课时</view>
					<view>{{datels.classHours}}</view>
				</view>
				<view class="btnas" @click="adlist">
					确定
				</view>
			</view>

		</u-popup>



		<view class="w-btn-fixed">
			<view class="btnlsita fliexs space_between">
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle" active-color="#E62131"
						@change="allchange">全选</u-checkbox>
				</u-checkbox-group>
				<view class="btns" @click="topaesad">
					扣费({{num}})
				</view>
			</view>
		</view>
		<u-modal v-model="outshow" :content="content" @confirm="confirmdate" @cancel="cancel"
			:show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	import staticUrl from "@/common/config.js"
	export default {
		data() {
			return {
				numsber: 0,
				inact: 0,
				popupshow: false, //asdfasdfasdf
				datels: null,
				action: staticUrl.staticUrl,
				header: {
					accessToken: 'bearer ' + uni.$func.cache("token"),
				},
				checked: false,
				fileList: [],
				imgList: [],
				num: 0,
				numList: [{
					name: '班课考勤'
				}, {
					name: '班课扣费'
				}, ],
				acindex: null,
				popitem: null,
				content: "是否确定扣费？",
				outshow: false,
			}
		},
		onLoad(options) {
			this.id = options.id
			this.openTime = options.openTime
			this.daTalilistgApi()

		},
		onShareAppMessage(res) {
			return {
				title: '',
				path: "/pages/index/index"
			}
		},
		onShow() {},
		onReachBottom() {},
		methods: {
			daTalilistgApi() {
				uni.$api.common.workoutadss(this.id, this.openTime).then((res) => {
					uni.hideLoading()
					this.datels = res.result
					if (this.datels.lessonPhotos) {
						this.fileList.push({
							url: this.datels.lessonPhotos
						})
						this.imgList.push(this.datels.lessonPhotos)
					}
					this.datels.studentWorkList.forEach((item) => {
						item.checked = false
						item.inact = 1
						if (item.isAttendance) {
							this.numsber += 1
						}

					})

				});
			},
			adlist() {
				this.popupshow = false
				this.datels.studentWorkList[this.acindex].inact = this.inact
			},
			ispopupshow(item, index) {
				this.popitem = item
				this.acindex = index
				this.popupshow = true
			},
			lisglcais(index) {
				this.inact = index
			},
			allchange(e) {
				if (e.value) {
					this.datels.studentWorkList.forEach((item) => {
						if (item.isAttendance != 0) {
							item.checked = false
						} else {
							item.checked = true
						}

					})
					this.num = this.datels.studentWorkList.length;
				} else {
					this.datels.studentWorkList.forEach((item) => {
						item.checked = false
					})
					this.num = 0;
				}
				this.$forceUpdate()
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e, index) {
				if (e.isAttendance != 0) {
					uni.showToast({
						title: "该学员已考勤",
						icon: 'none'
					})
					return
				}
				this.datels.studentWorkList[index].checked = !e.checked

				this.num = 0;
				this.datels.studentWorkList.forEach((item) => {
					if (item.checked) {
						this.num += 1
					}
				})
				if (this.num == this.datels.studentWorkList.length) {
					this.checked = true
				} else {
					this.checked = false
				}
				this.$forceUpdate()
			},
			onsuccesslist(e) {
				this.imgList.push(e.result.path)
			},
			confirmdate() {
				if (!this.num) {
					uni.showToast({
						title: "请选择学员",
						icon: 'none'
					})
					return
				}
				let studentWorkIds = [];
				this.datels.studentWorkList.forEach((item) => {
					if (item.checked) {
						studentWorkIds.push({
							"id": item.id,
							"isAttendance": item.inact
						})
					}
				})

				let parms = {
					"id": this.datels.id,
					"lessonPhotos": this.imgList.join(','),
					studentWorkIds
				}
				uni.$api.common.editHours(parms).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
						})
					}, 2000)

				});
			},

			cancel() {
				this.outshow = false;
			},
			topaesad() {
				this.outshow = true;
				this.content = "是否确定扣费？"
			},
		}
	}
</script>
<style scoped>
	/deep/.u-checkbox__label {
		width: 100% !important;
	}
</style>
<style lang="scss">
	.toplists {
		padding: 20rpx 30rpx;
	}

	.lsitchser {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.leftname {
			.lefttop {
				font-weight: bold;
			}

			.texts {
				color: #b1b1b1;
			}
		}
	}

	.btns {
		display: inline-block;
		padding: 10rpx 40rpx;
		text-align: center;
		background-color: #E62131;
		color: #ffffff;
	}

	.lsiutsad {
		display: flex;
		align-items: center;
		line-height: 70rpx;
	}

	.nametxts {
		color: #b1b1b1;
		padding-right: 20rpx;
	}

	.btnas {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: #E62131;
		color: #ffffff;
	}

	.listactve {
		display: inline-block;
		padding: 0rpx 21rpx;
		border-radius: 5rpx;
		color: #ffffff;
		background-color: #E62131;
		// font-size: 19rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.pads {
		padding: 0 5rpx;
	}
</style>